<template>
    <div style="text-align:center;width:100%;height:100%;margin-top:3px">
        <div id="bmapsss" style="min-width:5rem;min-height:5rem;width:100%;height:100%"></div>
    </div>
</template>

<script>
import echarts from "echarts";
require("echarts/map/js/province/henan");
export default {
  props: {
    center: String, //  地图中心店
    value: Array // 门店数组
  },
  data() {
    return {
      mapChart: null,
      storeArr: []
    };
  },
  watch: {
    center(res) {
      this.center = res;
    },
    value(res) {
      this.storeArr = res;
      this.jsonMap();
    }
  },
  methods: {
    jsonMap() {
      var url = "/410300.json";
      this.$fetch({
        url: url,
        method: "get"
      })
        .then(resData => {
          echarts.registerMap("洛阳", resData.data);
          this.initLuoYang();
        })
        .catch(err => {
          console.log(err);
        });
    },
    initLuoYang() {
      var geoCoordMap = {
        西工区: [112.4309294976, 34.6670038363],
        涧西区: [112.3591770197, 34.6610212021],
        洛龙区: [112.4638651322, 34.6236159104],
        老城区: [112.4350295831, 34.7253048201],
        瀍河区: [112.4963006537, 34.7039155259]
      };
      var center = geoCoordMap[this.center];
      var self = this;
      var data = [];
      this.storeArr.forEach(item => {
        var obj = {};
        obj.value = [];
        obj.name = item.name;
        obj.value.push(item.blng);
        obj.value.push(item.blat);
        obj.value.push(item.id);
        data.push(obj);
      });

      var max = 120,
        min = 2; //  todo
      var maxSize4Pin = 30,
        minSize4Pin = 2;
      var option = {
        tooltip: {
          show: false,
          trigger: "item",
          position: "top",
          extraCssText: "text-align:center;background-color:transparent",
          formatter: function(params) {
            var name = params.name;
            var value = "";
            if (typeof params.value[2] == "undefined") {
              value = params.value;
            } else {
              value = params.value[2];
            }
            var result =
              "<img  src='../../../../../../static/img/mapHover.png'><div style='width:100%;text-align:center;position: absolute;left: 0;top: 25%;'>" +
              "<span>" +
              name +
              "</span></br></div>";
            return result;
          }
        },
        legend: {
          show: false
        },
        geo: {
          show: true,
          center: center, // 地图中心点
          map: "洛阳",
          zoom: 23.5,
          roam: false,
          label: {
            normal: {
              show: true,
              color: "white"
            }
          },
          silent: true, // 不响应鼠标事件
          itemStyle: {
            normal: {
              borderColor: "#2ff0d2",
              areaColor: "rgba(47,240,210,0.1)",
              borderWidth: 1
            }
          }
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            data: data,
            symbolSize: 20,
            symbol: "image:// ../../../../../../../static/img/flh/addmdpi.png",
            symbolRotate: 0,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: true,
                textStyle: {
                  color: "#2ff0d2"
                }
              },
              emphasis: {
                show: false
              }
            }
          },
          {
            name: "categoryA",
            type: "map",
            tooltip: { show: false },
            geoIndex: 0,
            data: data
          }
        ]
      };
      var self = this;
      //    setTimeout(() => {
      self.mapChart = echarts.init(document.getElementById("bmapsss"));
      self.mapChart.setOption(option);
      setTimeout(() => {
        self.mapChart.resize();
      }, 10);
      self.mapChart.on("click", function(params) {
        var obj = {};
        obj.name = params.name;
        if (params.value[2]) {
          obj.id = params.value[2];
        } else {
          obj.id = "";
        }
        self.$emit("on-map", obj);
      });
      //    }, 10);
    }
  }
};
</script>
<style>

</style>
